<template>
  <div class="main"><br>

    <el-steps :active="active" finish-status="success">
      <el-step title="信息填写"></el-step>
      <el-step title="付款"></el-step>

    </el-steps>
    <div v-show="active==1">
      <message :planeData="planeData"></message>
    </div>
    <div v-show="active==2">
      <money :planeData="planeData"></money>
    </div>
    <div class="buttons">
      <el-button v-show="active==1||active==2" @click="prev">上一步</el-button>
      <el-button v-show="active==1" style="margin-top: 12px;" @click="next">下一步</el-button>
      <el-button v-show="active==2" style="margin-top: 12px;" @click="goHome()">取消支付</el-button>

    </div>
  </div>
</template>

<script>

import message from "../components/steps/message";
import money from "../components/steps/money";
import order from "../api/order"

export default {
  name: "ToPay",
  data() {
    return {
      //默认显示第一个组件
      active: 1,
      planeData: {
        orderNo: '111',
        planeId: '航班号',
        planeType: '单程航班',
        startAirport: '大兴国际机场',
        endAirport: '遥墙国际机场',
        startDateTime: '2022-06-09',
        endDateTime: '2022-06-11',
        flightStartTime: '01:30',
        flightEndTime: '08:30',
        flightNumber: 'G75086',
        name: '树根',
        phone: '110',
        totalFee: '200',
      },

    }
  },
  components: {
    message,
    money,
  }, created() {
    this.init();
  },
  methods: {
    //上一步
    prev() {
      --this.active;
      //判断条件，当active小于1，显示第一个组件
      if (this.active < 1) {
        this.active = 1
      }
    },

    //下一步
    next() {
      ++this.active;
      if (this.active > 3) {
        this.active = 1
      }
    },
    /**
     * 判断路径是否有id
     */
    init() {
      order.getOrderDetail(this.$route.params.orderNo)
        .then(response => {
          this.planeData = response.data.data.item
          //加入一个属性
          this.planeData.type = "付款";
        })
    },
    goHome() {
      this.$message({
        message: '已关闭支付',
        type: 'warning'
      });
      this.$router.push('/')
    }
  }

}
</script>

<style scoped>
.buttons {
  display: flex;
  align-items: baseline;
  justify-content: space-around;
  margin: 50px;
}

</style>
